<!--
 * @Author: aster lipian1004@163.com
 * @Date: 2025-02-10 10:27:00
 * @FilePath: \aster-flowable-uniapp\src\pages\tabbar\home.vue
 * @Description: 首页
 * Copyright (c) 2025 by Aster, All Rights Reserved.
-->
<!-- 首页 -->
<template>
  <view class="box-sizing-b wh-full bg-main">
    <van-grid class="margin-top" :border="false" :icon-size="30">
      <template v-if="annualTask.todoNum > 0">
        <van-grid-item
          icon="todo-list-o"
          :badge="annualTask.todoNum > 99 ? `99+` : annualTask.todoNum"
          :text="ApproveTitleEnum.TODO"
          @click="to_page(TaskStatusEnum.TODO)"
        >
          <template #icon>
            <i class="iconfont icon-daichuli !text-4xl" style="color: #ff8c00"></i>
          </template>
        </van-grid-item>
      </template>
      <template v-else>
        <van-grid-item
          icon="todo-list-o"
          :text="ApproveTitleEnum.TODO"
          @click="to_page(TaskStatusEnum.TODO)"
        >
          <template #icon>
            <i class="iconfont icon-daichuli !text-4xl" style="color: #ff8c00"></i>
          </template>
        </van-grid-item>
      </template>

      <van-grid-item
        icon="completed-o"
        :text="ApproveTitleEnum.COMPLETE"
        @click="to_page(TaskStatusEnum.COMPLETE)"
      >
        <template #icon>
          <i class="iconfont icon-yichuli !text-4xl" style="color: #32cd32"></i>
        </template>
      </van-grid-item>

      <van-grid-item
        icon="manager-o"
        :text="ApproveTitleEnum.STARTED"
        @click="to_page(TaskStatusEnum.STARTED)"
      >
        <template #icon>
          <i class="iconfont icon-yifaqi !text-4xl" style="color: #3d9ff0"></i>
        </template>
      </van-grid-item>

      <van-grid-item
        icon="guide-o"
        :text="ApproveTitleEnum.COPY"
        @click="to_page(TaskStatusEnum.COPY)"
      >
        <template #icon>
          <i class="iconfont icon-chaosong !text-4xl" style="color: #da70d6"></i>
        </template>
      </van-grid-item>
    </van-grid>
    <van-loading type="spinner" v-if="loadingState" color="#1989fa" class="loading-spinner" />
    <van-tabs v-model:active="activeApp" scrollspy sticky style="margin-top: 20rpx">
      <van-tab v-for="(app, index) in appInfos" :title="app.label" :name="app.value" :key="index">
        <van-collapse v-model="activeCollapse" style="width: 97%; margin: 0 auto">
          <van-collapse-item :name="app.value" :border="false">
            <template #title>
              <view class="fs fwb flex justify-start items-center">
                <van-divider vertical class="divider-vertical" />
                <text>{{ app.label }}</text>
              </view>
            </template>
            <van-grid :column-num="4" :border="false" :gutter="6">
              <van-grid-item
                v-for="(form, i) in app.children"
                :key="i"
                icon="photo-o"
                @click="to_form(form)"
              >
                <template #text>
                  <view class="grid_text van-multi-ellipsis--l2"> {{ form.label }}</view>
                </template>
                <template #icon>
                  <i
                    :style="analysisStyle(form.iconColor)"
                    :class="[form.icon, '!text-26px padding-sm border-radius']"
                  ></i>
                </template>
              </van-grid-item>
            </van-grid>
          </van-collapse-item>
        </van-collapse>
      </van-tab>
    </van-tabs>

    <van-back-top bottom="100" />
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { router } from '@/utils/router';
  import config from '@/utils/config';
  import { TaskStatusEnum, ApproveTitleEnum } from '@/enums/workFlowEnum';
  import { appFormTreeWithIconApi } from '@/api/workflow/app';
  import { getAnnualTaskApi } from '@/api/workflow/task';

  /** 审批数量 */
  const annualTask = ref<WorkTask.AnnualTaskModel>({
    todoNum: 0,
    completeNum: 0,
    startedNum: 0,
    ccNum: 0,
  });
  /** 选中标签值 */
  const activeApp = ref<string>('');
  /** 应用信息 */
  const appInfos = ref<WorkComponent.AppTreeNode[]>([]);
  /** 折叠面板 */
  const activeCollapse = ref<string[]>([]);
  /** 加载状态 */
  const loadingState = ref<boolean>(false);

  /** 加载数据 */
  const loadData = async (callback: Function) => {
    // 加载审批数量
    await handleQueryAnnualTask();
    // 加载应用信息
    await handleAppInfo();
    uni.stopPullDownRefresh();
    loadingState.value = false;
    await callback();
  };

  /** onShow加载数据 */
  const loadDataByShow = async (callback: Function) => {
    // 加载审批数量
    await handleQueryAnnualTask();
    uni.stopPullDownRefresh();
    await callback();
  };

  /**
   * @description: 查询年度办理情况
   * @return {*}
   */
  const handleQueryAnnualTask = async () => {
    getAnnualTaskApi().then(({ data }) => {
      annualTask.value = data;
    });
  };

  /** 获取应用表单信息 */
  const handleAppInfo = async () => {
    await appFormTreeWithIconApi().then(({ data }) => {
      appInfos.value = data;
      activeApp.value = data.length > 0 ? data[0].value : '';
      activeCollapse.value = data.map((item: WorkComponent.AppTreeNode) => item.value);
    });
  };

  /** 跳转审计中心 */
  const to_page = (approveType: string) => {
    router.reLaunch(config.route.approve + '?approveType=' + approveType);
  };

  /** 图标样式 */
  const analysisStyle = (iconColor?: string) => {
    const iconStyle = {
      background: iconColor ? iconColor : '#3D9FF0',
      color: '#fff',
    };
    return iconStyle;
  };

  /** 跳转表单 */
  const to_form = (form: WorkComponent.AppTreeNode) => {
    router.push(config.route.form_list + '?code=' + form.value + '&title=' + form.label);
  };

  // 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
  onLoad(() => {
    // 加载首页数据
    loadingState.value = true;
    loadData(() => {});
  });

  // 当 uni-app 启动，或从后台进入前台显示
  onShow(() => {
    // 加载首页数据
    loadDataByShow(() => {});
  });
</script>

<style scoped lang="scss">
  .van-grid {
    align-items: flex-start;
  }
  .grid_text {
    word-break: break-all;
    font-size: 24rpx;
    margin-top: 24rpx;
    color: #000000;
    line-height: 1.3;
    text-align: center;
    min-height: 60rpx;
  }
  .divider-vertical {
    border-color: #1989fa;
    border-radius: 6rpx;
    border-width: 4rpx;
    margin: 0 12rpx 0 0;
    height: 20rpx;
  }

  ::v-deep .van-grid-item__content {
    padding: 10rpx 16rpx;
  }
  ::v-deep .van-collapse-item__content {
    padding: 20rpx 6rpx;
  }
  .loading-spinner {
    position: absolute;
    top: 45%;
    left: 46%;
    z-index: 1;
  }
</style>
